import React from 'react';
import { connect } from 'umi';
import { Form, Input, Button } from 'antd';
import { LockOutlined, UserOutlined } from '@ant-design/icons';
import Reload from './../reload';
import md5 from 'md5';
import { useState } from 'react';
const App = ({ loading, dispatch, setStatus, handle }) => {
  const [form] = Form.useForm();

  const handleLogin = () => {
    form.validateFields().then((val) => {
      const { password } = val;
      dispatch({
        type: 'login/login',
        payload: {
          ...val,
          password: md5(password),
        },
        callback: (e) => {
          handle(e);
        },
      });
    });
  };

  return (
    <div style={{ marginTop: 24 }}>
      <Form form={form} name="horizontal_login" layout="inline">
        <Form.Item
          name="mobile"
          className="formInput_box"
          rules={[
            {
              required: true,
              message: '请输入手机/帐号',
            },
          ]}
        >
          <Input style={{ height: 60 }} height={60} placeholder="手机/帐号" />
        </Form.Item>

        <Form.Item
          name="password"
          className="formInput_box"
          rules={[
            {
              required: true,
              message: '请输入密码',
            },
          ]}
        >
          <Input.Password style={{ height: 60 }} height={60} placeholder="密码" />
        </Form.Item>
      </Form>
      <div className="account-operate" onClick={() => setStatus('reload')}>
        忘记密码
      </div>
      <Button onClick={handleLogin} loading={loading} type="primary" className="big-button">
        登录
      </Button>
    </div>
  );
};

export default connect(({ loading }) => ({
  loading: loading.models.login,
}))(App);
